<template>
    <div>
        <h1>医院</h1>
        <div class="level">
            <div class="left">等级:</div>
            <ul>
                <li :class="{ active: levelactive == '' }" @click="levelClick('')">全部</li>
                <li @click="levelClick(item.value)" v-for="(item) in levelarr" :key="item.value"
                    :class="{ active: levelactive == item.value }">
                    {{ item.name }}
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue"
import { HospitalLevelAndRegion } from '@/api/home'
import type { HospitalLevelAndRegionData, HospitalLevelAndRegionArr } from '@/api/home/type'
//控制等级高亮
const levelactive = ref<string>("")
const levelarr = ref<HospitalLevelAndRegionArr>([])
const $emit=defineEmits(['getlevel'])
onMounted(() => {
    getHospitalLevel()
})
//获取医院等级
const getHospitalLevel = async () => {
    const res: HospitalLevelAndRegionData = await HospitalLevelAndRegion('HosType')
    if (res.code === 200) {
        levelarr.value = res.data
    }
}

// 医院等级点击事件
const levelClick = (hosType: string) => {
    levelactive.value = hosType
    $emit('getlevel',hosType,)
}

</script>

<style lang="less" scoped>
.level{
    display: flex;
    margin: 20px 0;
    color: #7f7f7f;
}

.active {
    color: #55a6fe;
}
li{
    display: inline;
    margin: 0 3px;
    cursor: pointer;
}
</style>